<template>
  <view class="indexContainer">
    <!-- 聊天界面 -->
    <!-- <scroll-view class="chatContainer" id="chat" scroll-y="true" :scroll-top="scrollTop"> -->
    <scroll-view class="chatContainer" id="chat" :scroll-top="scrollTop" @scroll="scroll" scroll-y="true">
      <view class="chatItem" v-for="item in chatList">
        <!-- 左侧聊天 -->
        <view class="chatLeft" v-if="item.position == 'left'" :id="item.id">
          <image :src="item.url"></image>
          <view class="content" hover-class="hoverChat1" hover-stay-time="2000">{{ item.content }}</view>
        </view>
        <!-- 右侧聊天 -->
        <view class="chatRight" v-else-if="item.position == 'right'" :id="item.id">
          <view class="content" hover-class="hoverChat2" hover-stay-time="2000">{{ item.content }}</view>
          <image :src="item.url"></image>
        </view>
      </view>
    </scroll-view>
    <!-- 发送信息部分 -->
    <view class="sendMsgContainer">
      <uni-easyinput type="text" autoHeight class="chatInput" :styles="style" v-model="content"></uni-easyinput>
      <button type="primary" size="mini" @click="sendClick">发送</button>
    </view>
  </view>
</template>
</view>
</view>
</template>

<script>
  export default {
    data() {
      return {
        // 距离顶端滚动距离
        scrollTop: 0,
        // 历史滚动区域
        old: {
          scrollTop: 0
        },
        // 消息内容
        content: '',
        // 行内样式
        style: {
          height: '10px'
        },
        // 聊天列表
        chatList: [
          {
            url: 'https://s1.ax1x.com/2022/11/06/xXHqbV.jpg',
            userName: '智能客服',
            content: '您好！请问有什么需要帮助您的吗？',
            position: 'left'
          },
        ]
      }
    },
    onLoad() {
    },
    methods: {
      // 发送按钮被点击
      sendClick() {
        // 没有发送内容就直接返回
        if(this.content == '') {
          uni.showToast({
            title: '发送的消息不能为空',
            icon: 'none'
          })
         return;
        }
        // 创建发送的对象
        var item = {
          url: 'https://s1.ax1x.com/2022/11/06/xXHbD0.jpg',
          userName: '王文杰',
          content: this.content,
          position: 'right'
        }
        // 放入聊天列表
        this.chatList.push(item);
        // 引入外部的this指针
        var _this = this;
        // 发送请求请求AI回复
        uni.request({
          // url:'http://192.168.0.116:3800/api/question',
          url:'http://172.20.10.9:3800/api/question', 
          data: {
            // 将问题作为参数
            question: this.content  
          }, 
          success: (res) => {
            if (res.data.code != 200) {
              uni.showToast({
                title:'服务器发生错误', 
                icon: 'error',
              })
              return;
            }
            // 成功调用生成回答对象对响应对象里面拿出数据
            var answer = {
              url: 'https://s1.ax1x.com/2022/11/06/xXHqbV.jpg',
              userName: '机器人',
              content: res.data.data,
              position: 'left'
            } 
            // 放入聊天列表
            _this.chatList.push(answer);
            // 始终保持屏幕下滑到最底端
            _this.goBottom();
          }
        })
        this.content = '';
        this.goBottom();
      },
      // 监管监听事件
      scroll(e) {
        this.old.scrollTop = e.detail.scrollTop;
      },
      // 下一轮渲染滚到底部
      goBottom(){
        this.scrollTop = this.old.scrollTop;
        this.$nextTick(function(){
          this.scrollTop = 9999;
        })
      },
    },
  }
</script>

<style>
  /* 会话界面整体设置 */
  .indexContainer .chatContainer {
    width: 90%;
    height: 1200rpx;
    background-color: #f5f5f5;
    padding: 30rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
    /* 超出显示滚动条 */
    overflow-y: scroll;
  }

  /* 设置左侧聊天整体 */
  .chatLeft {
    display: flex;
    margin-bottom: 30rpx;
  }

  .chatRight {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30rpx;
  }

  /* 设置左右侧头像 */
  .indexContainer .chatContainer image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  /* 设置左侧聊天框 */
  .indexContainer .chatContainer .chatLeft .content {
    width: 400rpx;
    background-color: #ffffff;
     transition: background-color 0.1s linear;
    border-radius: 25rpx;
    border-start-start-radius: 0rpx;
    padding: 20rpx;
    margin-left: 20rpx;
  }

  /* 单独设置右侧聊天框 */
  .chatRight .content {
    width: 400rpx;
    background-color: lightgreen;
     transition: background-color 0.1s linear;
    border-radius: 25rpx;
    border-start-end-radius: 0rpx;
    padding: 20rpx;
    margin-right: 20rpx;
  }

  /* 发送信息区整体 */
  .sendMsgContainer {
    position: absolute;
    display: flex;
    width: 700rpx;
    padding: 20rpx;
  }

  .sendMsgContainer button {
    margin-left: 20rpx;
  }
  
  /* 聊天框按下触发的样式 */
 .chatItem .hoverChat1 {
    transition: background-color 0.1s linear;
    background-color: #e3e3e3 !important;
    user-select: all;
  }
  .chatItem .hoverChat2 {
    transition: background-color 0.1s linear;
    background-color: #66a553 !important;
    user-select: all;
  }
  /* 设置发送按钮 */
  .sendMsgContainer button {
    width: 150rpx;
    line-height: 70rpx;
    
  }
</style>
